<template>
    <div class="location">
        <div class="moduleHead">
            <span class="center">
             <router-link :to="{ name: 'filter' }">
                <span class="back"></span>
            </router-link>
            <span>{{language.filter_location}}</span>
            </span>
        </div>
        <div class="body">
            <ul class="selectL">
                <li type='anywhere' :class="[locationType == 'anywhere' ? 'active' : '']" @click='selectLocationType'>
                    {{language.filter_anywhere}}
                </li>
                <li type='region' :class="[locationType == 'region' ? 'active' : '']" @click='selectLocationType'>
                    {{language.location_region}}
                </li>
                <li v-if="hasZipSearch" type='zip' :class="[locationType == 'zip' ? 'active' : '']" @click='selectLocationType'>
                    {{language.location_zip}}<span class="ico_gold"></span>
                </li>
            </ul>
            <dl v-if="locationType == 'region'" class="selectL">
                <dt>{{language.location_region}}</dt>
                <dd>
                    {{language.unify_country}}
                    <div class="selectBox">
                        <select @change='changeCountry' v-model='locationData.region.r_country'>
                            <option v-for="item in countryList" :value="item.value">{{item.label}}</option>
                        </select>
                    </div>
                </dd>
                <dd>
                    {{language.unify_state}}
                    <div class="selectBox">
                        <select v-model='locationData.region.match_r_state_id'>
                            <option v-for="item in stateList" :value="item.value">{{item.label}}</option>
                        </select>
                    </div>
                </dd>
            </dl>
            <ul v-if="locationType == 'zip'" class="selectL">
                <dd>
                    {{language.location_zip}}
                    <div class='inutBox'>
                        <input type='text' v-model='locationData.zip.r_zip'></input>
                    </div>
                </dd>
                <dd>
                    {{language.location_distance}}
                    <div class="selectBox">
                        <select v-model='locationData.zip.distance'>
                            <option v-for="item in distanceList" :value="item.value">{{item.label}}</option>
                        </select>
                    </div>
                </dd>
            </ul>
        </div>
        <publicDialog :props="dialogData"></publicDialog>
    </div>
</template>
<script>
import storeDataPartMixin from '../common/storeDataPartMixin'
import publicDialog from './PublicDialog'

export default {

    name: 'location',

    components: {
        publicDialog
    },

    mixins: [storeDataPartMixin],

    data: function() {
        return {
            dialogData: {},
            locationType: 'anywhere',
            locationData: {
                'anywhere': '',
                'region': {
                    r_country: '',
                    match_r_state_id: '',
                    is_distance: 0
                },
                'zip': {
                    r_zip: '',
                    distance: '-1',
                    is_distance: 1
                }
            },
            countryList: [],
            stateList: [],
        }
    },

    created() {
        this.getCountryList();

        let str = Unit.getSessionStorage("fliterLocation");
        if (str) {
            let obj = JSON.parse(str);
            this.locationType = obj.locationType;
            this.locationData = obj.locationData;
            if (this.locationData.region.r_country) {
                this.getStateList(this.locationData.region.r_country);
            }
        }

    },

    activated() {
        this.dialogData = {};
        this.setZipDefaultVal();
    },

    computed: {
        distanceList() {
            return JSON.parse(Unit.getLocalStorage('ms_distance'));
        },
        userInfo() {
            return this.$store.state.user.userInfo;
        },
        hasZipSearch() {
            if (parseInt(this.userInfo.account.country) !== 0 && parseInt(this.userInfo.account.country) !== 31 && parseInt(this.userInfo.account.country) !== 180) {
                return false;
            } else {
                return true;
            }
        },
    },

    methods: {
        setZipDefaultVal() {
            if (_.trim(this.locationData.zip.r_zip).length == 0) {
                this.locationData.zip.r_zip = this.userInfo.account.zip || '';
            }
        },

        selectLocationType(e) {
            let tthis = this;
            if (parseInt(tthis.$store.state.user.userInfo.status.isGuest) == 1 && e.target.attributes.type.value == 'zip') {
                tthis.dialogData = {
                    position: 'middle',
                    type: 'upgrade',
                    content: {
                        info: tthis.language.filter_upgradeTip,
                    }
                };
                return false;
            }
            tthis.locationType = e.target.attributes.type.value;
        },

        changeCountry: function(e) {

            let value = e.target.value;

            this.locationData.region.match_r_state_id = '';

            if (value == '') {
                this.stateList = [{
                    value: '',
                    label: this.language.filter_anywhere
                }];
            } else {
                this.getStateList(value);
            }

        },

        getCountryList: function() {
            let tthis = this;
            this.storeDataPartMixin_GetCountryList(function(result) {
                tthis.countryList = result;
                tthis.countryList.unshift({
                    value: '',
                    label: tthis.language.location_allCountries
                });
                tthis.stateList = [{
                    value: '',
                    label: tthis.language.filter_anywhere
                }];
            });
        },

        getStateList: function(value) {
            let tthis = this;
            this.storeDataPartMixin_GetStateList(value, function(result) {
                tthis.stateList = result;
            });
        },

        saveSessionStore: function() {
            let obj = {},
                arr = [];
            obj.locationType = this.locationType;
            obj.locationData = this.locationData;
            if (this.locationType == 'region') {
                if (this.locationData.region.match_r_state_id) {
                    arr.push(this.getIdToText(this.locationData.region.match_r_state_id, this.stateList));
                }
                if (this.locationData.region.r_country) {
                    arr.push(this.getIdToText(this.locationData.region.r_country, this.countryList));
                }
            } else if (this.locationType == 'zip') {
                if (this.locationData.zip.r_zip) {
                    arr.push(this.locationData.zip.r_zip);
                }
                if (this.locationData.zip.distance) {
                    arr.push(this.getIdToText(this.locationData.zip.distance, this.distanceList));
                }
            } else {
                arr.push('anywhere');
            }
            if (arr.length > 0) {
                obj.locationDes = arr.join(',');
            } else {
                obj.locationDes = 'anywhere';
            }
            //console.log('saveSessionStore', obj);
            Unit.setSessionStorage("fliterLocation", JSON.stringify(obj));
        },

        getIdToText: function(id, arr) {
            let str = '';
            if (id) {
                for (let i in arr) {
                    if (arr[i].value == id) {
                        str = arr[i].label;
                    }
                }
            }
            return str;
        },
    },

    watch: {
        locationType: function(newValue, oldValue) {
            //console.log('locationType');
            this.saveSessionStore();
        },

        locationData: {
            handler: function(newValue, oldValue) {
                //console.log('locationData');
                this.saveSessionStore();
            },
            deep: true
        }
    }
}

</script>
<style scoped>
.location {
    padding-top: 44px;
}

.location .ico_gold {
    padding: 2px 0 2px 18px;
    background: url(../assets/ico_gold.png) center no-repeat;
    background-size: auto 18px;
    margin-left: 5px;
}

.location .selectL {
    margin-top: 20px;
    background-color: #fff;
}

.location .body {
    padding: 0 15px;
}

.location .selectL li,
.location .selectL dd,
.location .selectL dt {
    margin: 0 5px;
    line-height: 22px;
    padding: 12px 0;
    position: relative;
    border-bottom: 1px solid #ececec;
    color: #999;
    font-size: 14px;
}

.location .selectL dt {
    color: #666;
}

.location .selectL li:last-child,
.location .selectL dd:last-child {
    border-bottom: 0;
}

.location .selectL li:after {
    content: '';
    position: absolute;
    height: 42px;
    top: 0;
    right: 5px;
    width: 22px;
    background: url(../assets/ico_hook.png) center no-repeat;
    background-size: 22px auto;
    display: none;
}

.location .selectL li.active:after {
    display: block;
}

.location .selectL .selectBox {
    position: absolute;
    top: 10px;
    height: 22px;
    width: calc(100% - 120px);
    right: 7px;
}

.location .selectL .selectBox select {
    width: 100%;
    border: 0;
    font-size: 13px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    direction: rtl;
    background: #fff;
    color: #666666;
}

.location .selectL .selectBox select option {
    direction: ltr;
}

.location .inutBox input {
    position: absolute;
    top: 10px;
    right: 10px;
    height: 22px;
    width: 70px;
    right: 7px;
    background: #fff;
    color: #666666;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 0 5px;
}

.location .selectL .r_zip {
    position: absolute;
    right: 10px;
    top: 9px;
    border-radius: 3px;
    border: 1px solid #ccc;
    background: none;
    width: 60px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    padding: 3px 3px;
    display: none;
}

.location .selectL li:active .r_zip {
    display: block;
}

</style>
